<template>
    <el-form label-width="120px">
        <el-form-item label="横幅标题">

            <el-input v-model="banner.name" placeholder="标题">

            </el-input>

        </el-form-item>
        <el-form-item label="横幅位置">

            <el-select v-model="banner.position" placeholder="选择横幅位置">
                <el-option v-for="item in banner_position" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
            </el-select>

        </el-form-item>

        <el-form-item label="所属平台">

            <el-select v-model="banner.platform" placeholder="选择所属平台">
                <el-option v-for="item in platform_list" 
                :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
            </el-select>

        </el-form-item>

        <el-form-item label="宽度比：" label-position="left">
            <el-input-number min="1" v-model="banner.image_width"></el-input-number>
        </el-form-item>

        <el-form-item label="高度比：">
            <el-input-number min="1" v-model="banner.image_height"></el-input-number>
        </el-form-item>

        <el-form-item label="状态">

            <el-switch v-model="banner.status" active-value="1" inactive-value="0"></el-switch>

        </el-form-item>

        <el-form-item label="图片">

            <el-row style="width:100%">
                <el-col>
                    <el-button type="primary" @click="addImage">添加横幅图片</el-button>
                </el-col>
            </el-row>
            <div style="height:20px"></div>

            <el-table :data="banner.image_list" style="margin-top:20px">


                <el-table-column prop="image" label="图片" width="">

                    <template #default="scope">
                        <!-- <el-image @click="chooseExtraImage(scope.row)" :src="VITE_URL + '/storage/' + scope.row.image"> -->
                        <el-image @click="chooseExtraImage(scope.row)" :src="WQ_ADDONS_URL + '/storage/' + scope.row.image">
                            <template #placeholder>
                                <div class="image-slot">Loading<span class="dot">...</span></div>
                            </template>
                            <template #error>
                                <div @click="chooseExtraImage(scope.row)" class="image-slot">
                                    <el-icon><icon-picture /></el-icon>
                                </div>
                            </template>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="标题" width="">

                    <template #default="scope">

                        <el-input v-model="scope.row.title"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="link" label="链接" width="">
                    <template #default="scope">

                        <el-input v-model="scope.row.link"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="sort_order" label="排序" width="">
                    <template #default="scope">

                        <el-input-number min="0" max="999" v-model="scope.row.sort_order"></el-input-number>
                    </template>

                </el-table-column>
                <el-table-column prop="" label="操作" width="120">

                    <template #default="scope">
                        <!-- <el-button type="primary" @click="img_delete(scope.row.banner_image_id)" >删除</el-button> -->
                        <el-button type="primary" @click="img_delete(scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </el-form-item>
        <el-form-item label="">

            <el-button type="primary" @click="save">保存</el-button>
        </el-form-item>

    </el-form>



    <FileManager :FileManagerData="FileManagerData" @express="checkImage"></FileManager>
</template>

<script lang="ts" setup>

import { ref } from 'vue';
import { useRoute, useRouter } from "vue-router";
import axios from 'axios';
import { Picture as IconPicture } from '@element-plus/icons-vue'
import FileManager from '../../Common/file-manager.vue'
import { ElMessage } from 'element-plus';

const FileManagerData = ref<object>({
    visible: false,
    image: '',
    imageObj: null,
});

const VITE_URL = window.VITE_URL;
const WQ_ADDONS_URL = window.WQ_ADDONS_URL;

const route = useRoute();
const router = useRouter();

const banner_position: any = ref<object>([
    {
        label: '首页',
        value: 'home'
    },
])
const platform_list = ref([
    {
        label:'电脑端',
        value:'pc',
    },
    {
        label:'小程序',
        value:'xcx',
    }
])
// let banner_id: number = 0;
let banner_id: any = 0;

const banner: any = ref<object>({

    name: '',
    position: 'home',
    image_width: 1,
    image_height: 1,
    image_list: [],
    status: '1',

});

const get_banner = () => {

    const url: string = VITE_URL + '/admin.design.banner/single?banner_id=' + banner_id;
    axios.get(url).then(res => {

        banner.value = res.data
        banner.value.status += '';
    })

}

const img_delete = (index: any) => {

    console.log(index);


    banner.value.image_list.splice(index, 1)

    console.log(banner.value.image_list);
}
// get_banner()

const addImage = () => {

    banner.value.image_list.push({
        banner_id: banner_id,
        banner_image_id: 0,
        image: "",
        link: "",
        sort_order: 0,
        title: "",
    })
}

const save = () => {

    let url = VITE_URL + '/admin.design.banner';
    if (banner_id) {
        url += '/edit?banner_id=' + banner_id;
    } else {
        url += '/create';
    }



    const data = {

        name: banner.value.name,
        position: banner.value.position,
        platform: banner.value.platform,
        status: banner.value.status,
        image_width: banner.value.image_width,
        image_height: banner.value.image_height,
        image_list: banner.value.image_list,
    }


    axios.post(url, data).then(res => {

        ElMessage({
            message: !res.data.code ? '保存成功' : res.data.message,
            duration: 1000,
            type: !res.data.code ? 'success' : 'error',
            onClose: function () {
                if (!res.data.code) {
                    router.push({ path: '/main/design/banner' });
                }
            }
        })
    })
}

const init = () => {

    banner_id = route.params.id ? route.params.id : 0;

    if (banner_id) {

        get_banner()

    }

}

init();



const chooseImage = () => {

    console.log('choose image')
    FileManagerData.value.visible = true;
    FileManagerData.value.image = '';
    FileManagerData.value.imageObj = null;
}

const chooseExtraImage = (imageObj: any) => {

    console.log('choose extra image')
    FileManagerData.value.visible = true;
    FileManagerData.value.image = '';
    FileManagerData.value.imageObj = imageObj;


}

const checkImage = (data: object) => {

    console.log(data)

    if (FileManagerData.value.imageObj) {
        FileManagerData.value.imageObj.image = data.image.path
    } else {

    }


}

</script>

<style>
.el-image {

    width: 200px;
    height: 200px;

}


.el-image .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: var(--el-fill-color-light);
    color: var(--el-text-color-secondary);
    font-size: 30px;
}

.el-image .image-slot .el-icon {
    font-size: 30px;
}
</style>